<form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()">
  <nz-form-item>
    <nz-form-control nzHasFeedback>
      <nz-input-group [nzPrefix]="prefixUser">
        <input type="text" nz-input formControlName="userName" placeholder="Username"/>
      </nz-input-group>
      <nz-form-explain
        *ngIf="getFormControl('userName').dirty&&getFormControl('userName').hasError('required')">
        Please input your username!
      </nz-form-explain>
      <nz-form-explain
        *ngIf="getFormControl('userName').dirty&&getFormControl('userName').hasError('maxlength')&&!getFormControl('userName').hasError('trimError')">
        最大长度50个字符
      </nz-form-explain>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-control nzHasFeedback>
      <nz-input-group [nzPrefix]="prefixLock">
        <input type="password" nz-input formControlName="password" placeholder="Password"/>
      </nz-input-group>
      <nz-form-explain *ngIf="validateForm.get('password')?.dirty && validateForm.get('password')?.errors">
        Please input your Password!
      </nz-form-explain>
    </nz-form-control>
  </nz-form-item>

  <!--<nz-range-picker [nzDateRender]="tplRender"></nz-range-picker>-->
  <nz-form-item>
    <nz-form-control nzHasFeedback>
      <nz-input-group>
        <nz-date-picker [nzDisabledDate]="setMAxDate"></nz-date-picker>
      </nz-input-group>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-control nzHasFeedback>
      <nz-input-group>
        <nz-input-number  [nzMin]="1" [nzMax]="10" [nzStep]="1"></nz-input-number>
      </nz-input-group>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-control>
      <label nz-checkbox formControlName="remember">
        <span>Remember me</span>
      </label>
      <a class="login-form-forgot" class="login-form-forgot">Forgot password</a>
      <button nz-button class="login-form-button" [nzType]="'primary'" [disabled]="!validateForm.valid">Log in</button>
      Or
      <a [routerLink]="['/register']">register now!</a>
    </nz-form-control>
  </nz-form-item>
</form>
<nz-spin [nzSpinning]="false">
  <nz-collapse >
    <nz-collapse-panel
      *ngFor="let panel of panels"
      [nzHeader]="panel.name"
      [nzActive]="panel.active"
      [nzDisabled]="panel.disabled"
    >
      <p style="margin:0;">
        A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome
        guest in many households across the world.
      </p>
    </nz-collapse-panel>
  </nz-collapse >
</nz-spin>

